/*
 * @Author: your name
 * @Date: 2022-04-01 09:46:58
 * @LastEditTime: 2022-04-06 19:53:47
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \lalalal\src\views\finance\customModal\customModal.jsx
 */
import React, { useState } from 'react';
import { Table, Tag, Checkbox, Modal, Button, } from 'antd';
import Modifyinfo from './modifyInfo'
import './customModal.css'
import {
    SettingFilled,
    FormOutlined
} from '@ant-design/icons';
const Custommodal = () => {
    //模态框
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [isModifyinfo, setisModifyinfo] = useState(false);
    const [singleInfo, setsingleInfo] = useState('');

    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    //表格数据
    const data = [
        {
            key: '1',
            name: '客户名称',
            showName: '客户名称',
            showList: true,
            ifRequired: false,
        },
        {
            key: '2',
            name: '联系人',
            showName: '联系人',
            showList: true,
            ifRequired: true,
        },
        {
            key: '3',
            name: '关联',
            showName: '关联',
            showList: true,
            ifRequired: true,
        },
        {
            key: '4',
            name: '收入-支出',
            showName: '收入-支出',
            showList: true,
            ifRequired: true,
        }
    ];
    const columns = [
        {
            title: '字段名称',
            dataIndex: 'name',
            key: 'name',
            render: text => <>{text}</>,
        },
        {
            title: '显示名称',
            dataIndex: 'showName',
            key: 'showName',
            render: showName => {
                // console.log(showName);
                return (<>
                    {showName === "客户名称" ? showName : <>{showName} < FormOutlined className='editie' onClick={() => editieInfo(showName)} /></>}
                </>)
            }
        },
        {
            title: '列表显示',
            dataIndex: 'showList',
            key: 'showList',
            render: showList => {
                // console.log(showList);
                return (<>
                    <Checkbox onChange={onChangeList} defaultChecked={'true'} />
                </>)
            }
        },
        {
            title: '是否必填',
            key: 'ifRequired',
            dataIndex: 'ifRequired',
            render: ifRequired => {
                // console.log(ifRequired);
                return (<>
                    {
                        ifRequired ? <Checkbox onChange={onChangeRes} defaultChecked={'true'} className='bgcCheck' /> : '-'
                    }

                </>)
            }
        }
    ];

    //修改字段限制名称
    const editieInfo = (showName) => {
        setisModifyinfo(!isModifyinfo)
        setsingleInfo(showName)
    }
    //修改modal状态值
    const modifyModalVisible = (f) => {
        setisModifyinfo(f)
    }
    //列表显示
    const onChangeList = () => {

    }
    const onChangeRes = (e) => {
        console.log(e.target.onFocus());
    }
    return (
        <>
            <Button type="primary" danger icon={<SettingFilled />} onClick={showModal}>
                自定义设置
            </Button>
            <Modal title="自定义设置" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <Table columns={columns} dataSource={data} pagination={false} />
            </Modal>
            {
                isModifyinfo ?
                    <Modifyinfo
                        singleInfo={singleInfo}
                        modifyModalVisible={modifyModalVisible}
                    /> : ''
            }

        </>
    );
}

export default Custommodal;
